<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Find Location Coordinates</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="/css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
  <link rel="stylesheet" href="/css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="/css/custom.css" type="text/css" media="screen, projection">

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-364613-8']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<script type="text/javascript">

  var rounding = Math.pow(10, 6);

  function initialize() {
	  
    var AthensLatlng = new google.maps.LatLng(37.979179, 23.716650);
    
    
    var myOptions = {
      zoom: 5,
      center: AthensLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   	var refineIcon = new google.maps.MarkerImage('/img/mapNumIcons/redMarker.png',
               new google.maps.Size(32, 34),
               new google.maps.Point(0, 0),
               new google.maps.Point(10, 34));
       
    var movableMarker =  new google.maps.Marker({
        position: AthensLatlng, 
        map: map,
        icon: refineIcon,
        title:"Drag me silly and call me marker!",
        zIndex: 10,
        draggable: true
    });   
    
    attachShowMarkerLocation(movableMarker,map);
           
    //map.fitBounds(boundingBox);

	$('#latTxt').val(roundDigits(movableMarker.getPosition().lat()));
	$('#lngTxt').val(roundDigits(movableMarker.getPosition().lng()));


  }

  function attachShowMarkerLocation(marker, map) {
	  
      var infowindow = new google.maps.InfoWindow(
    	      { content: "Location",
    	        size: new google.maps.Size(50,50)
    	      });

    
    google.maps.event.addListener(marker, 'click', function() {
    	infowindow.setContent(marker.getPosition().toString());
    	infowindow.open(map,marker);
      });

    google.maps.event.addListener(marker, 'drag', function() {
        
    	$('#latTxt').val(roundDigits(marker.getPosition().lat()));
    	$('#lngTxt').val(roundDigits(marker.getPosition().lng()))
      });
  
  }

  function roundDigits(num) {
	  return Math.round(num * rounding) / rounding;
  }
  
</script>
</head>
<body onload="initialize()">
<div class="container">

<div class="backHome"><a href="/">Home</a></div>
<h1>Find Coordinates</h1>
<hr />

<div class="span-16" >
	<fieldset> 
       <legend>Map</legend>
  		<div id="map_canvas" style="width: 600px; height: 600px;" align="center"></div>
  	</fieldset>
  
</div>

<div class="span-8 last">

	<fieldset> 
       <legend>Instructions</legend> 
		<p>Drag the marker around to see the coordinates below.</p>
	</fieldset>

	<fieldset> 
       <legend>Coordinates</legend> 
	     <p><label for="lat">Latitude: </label><br> 
    		<input type="text" id="latTxt" name="lat" value="latitude here"> <br />
    		<label for="lng">Longtitude: </label><br> 
    		<input type="text" id="lngTxt" name="lng" value="longtitude here"> <br />
		  </p>
	</fieldset>
</div>
</div>
</body>
</html>